<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding" style="margin-bottom: 11px">
      <a-tabs @change="changeTab" activeKey="2">
        <a-tab-pane key="1" tab="核销卡管理"></a-tab-pane>
        <a-tab-pane key="2" tab="核销卡订单"></a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper" v-if="true">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-form-item style="margin: 0">
                <a-input placeholder="请输入文章ID" v-model="queryParams.keyword">
                  <a-icon slot="suffix" type="search" />
                </a-input>
              </a-form-item>
            </a-col>
            <!-- <a-col
              :md="8"
              :sm="24"
            >
              <a-form-item label="状态">
                <a-select
                  placeholder="请选择"
                  default-value="-1"
                >
                  <a-select-option value="-1">全部</a-select-option>
                  <a-select-option value="1">启用</a-select-option>
                  <a-select-option value="0">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons" style="margin: 0">
                <a-button
                  style="margin-right: 8px"
                  @click="
                    () => {
                      this.queryParams = {}
                    }
                  "
                  >重置</a-button
                >
                <a-button type="primary" @click="$refs.table.refresh()">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="card_style_re">
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <template slot="status_text" slot-scope="text, record">
          <a-badge :status="record.status == '0' ? 'success' : 'Processing'" :text="text" />
        </template>
        <template slot="time" slot-scope="scope">
          <span>{{$moment(scope.sale_time * 1000).format('YYYY-MM HH:mm:ss')}}</span>
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { verifySaleList } from '@/api/marketing'

const STATUS = {
  1: '显示',
  0: '不显示',
}

const columns = [
  {
    title: '文章ID',
    dataIndex: 'id',
  },
  {
    title: '核销卡名称',
    dataIndex: 'verify_card_name',
  },
  {
    title: '类型',
    dataIndex: 'order_type_text',
  },
  {
    title: '用户名',
    dataIndex: 'user_name',
  },
  {
    title: '核销次数',
    dataIndex: 'use_num',
  },
  {
    title: '剩余次数',
    dataIndex: 'left_num',
  },
  {
    title: '购买时间',
    scopedSlots: {
      customRender: 'time',
    },
  },
  {
    title: '状态',
    dataIndex: 'status_text',
    scopedSlots: {
      customRender: 'status_text',
    },
    // },
    // {
    //   title: '操作',
    //   width: '150px',
    //   dataIndex: 'action',
    //   scopedSlots: {
    //     customRender: 'action'
    //   }
  },
]

export default {
  name: 'ArticleList',
  components: {
    STable,
  },
  data() {
    return {
      isNew: false,
      visible: false,
      queryParams: {
        keyword: '',
      },
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      // 表头
      columns,
      modalLoading: false,
      statusSelectValue: {
        key: '1',
        label: '显示',
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return verifySaleList({ ...parameter, ...this.queryParams })
          .then((res) => {
            console.log('verifySaleList', res)
            this.type_list = res.data.type_list
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
    }
  },
  filters: {
    statusFilter(key) {
      return STATUS[key]
    },
  },
  created() {},
  methods: {
    changeTab(val) {
      if (val == 1) {
        this.$router.push({ name: 'VerifyList' })
      }
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
